<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区域 -->
    <el-card class="card">
      <!-- 提示 -->
      <el-alert title="注意:只允许为第三级分类设置相关参数!" type="warning" show-icon  :closable="false"/>

      <!-- 级联选择器 -->
      <div class="select">
        <span>选择商品分类:</span>
        <el-cascader clearable placeholder="---请选择---" v-model="jilianValue" :options="options" :props="{label: 'cat_name', value: 'cat_id', children: 'children'}" @focus="handleFocus" @change="handleChange"/>
      </div>

      <!-- 选项卡 -->
      <el-tabs v-model="activeName" class="tabs" @tab-change="handleClick">
        <el-tab-pane label="动态参数" name="many">
            <Tables :tableData="tableData" @showDialog="showDialog" @init="init" @setID="setID" :activeName="activeName" :btnDisable="btnDisable"></Tables>
        </el-tab-pane>

        <el-tab-pane label="静态属性" name="only">
            <Tables :tableData="tableData" @showDialog="showDialog" @init="init" @setID="setID" :activeName="activeName" :btnDisable="btnDisable"></Tables>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    
    <!-- 添加修改属性 -->
    <AddEditDialog :cateID="cateID" :attrID="attrID" :typeFlag="typeFlag" :activeName="activeName" :addEditUserDialog="addEditUserDialog" @showDialog="showDialog" @init="init"/> 
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { GetListFnc, GetAttrFnc } from '@/api/params'
import Tables from './components/Table/IndexView.vue'
import AddEditDialog from './components/AddEdit/IndexView.vue'

const tableData = ref<any>([]) // table数据源
const options = ref([]) // 级联所有的数据
const jilianValue = ref([]) // 级联选择的数据
const activeName = ref('many') // 动态参数 或者 静态属性
const cateID = ref('') // catID 分类ID
const attrID = ref('') // catID 属性ID
const btnDisable = ref(true) // btn状态
const addEditUserDialog = ref(false) // 参数(属性) 添加 或 修改
const typeFlag = ref('') // Dialog btn点击 要么是add 要么是edit

const init = async () => {
  const res = await GetAttrFnc(parseInt(cateID.value), {sel: activeName.value})
  if(res.data.meta.status === 200) {
    tableData.value = res.data.data
  }
}

// 获得级联选择器数据 当获得焦点时触发
const handleFocus = async () => {
  const res = await GetListFnc()
  if(res.data.meta.status === 200) {
    options.value = res.data.data
  }
}

// 获得级联选择器 当前值的 cateID 当绑定值变化时触发的事件
const handleChange = (value: number[]) => {
  btnDisable.value = true
  cateID.value = ''
  activeName.value = 'many'
  tableData.value = []
  try {
    if(value.length === 3) {
       cateID.value = value[2] + ''
       btnDisable.value = false
       init()
    } 
  } catch (error) {
    btnDisable.value = true
    cateID.value = ''
    activeName.value = 'many'
    tableData.value = []
  }
}

// tab选项卡
const handleClick = (name: string) => {
  activeName.value = name
  if(cateID.value !== '') {
    init()
  }
}

// 显示 或 隐藏 参数(属性) 给组件使用
const showDialog = (flag: boolean, type: string) => {
  addEditUserDialog.value = flag
  typeFlag.value = type
}

// 设置分类cateID 和 属性 arrtID 给子组件使用
const setID = (cateid: string, attrid: string) => {
  cateID.value = cateid
  attrID.value = attrid
}

</script>

<style lang="scss" scoped>
.card{
  margin-top: 20px;
  .select{
    margin-top: 20px;
    span{
      margin-right: 10px;
    }
  }
  .tabs{
    margin-top: 20px;
  }
}
</style>